<template>
    <div style="display: flex;">
        <el-row>
            <el-col :span="16">
                <div>
                    <face-page :user-face="user" @update:list="getClockList"/>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <el-card class="box-card">
                        <div slot="header" style="display: flex;justify-content: space-between">
                            <span>考勤列表</span>
                            <span>{{date}}</span>
                        </div>
                        <el-table :data="clockList" height="420px" class="test" :show-header="false">
                            <el-table-column label="姓名" prop="name"></el-table-column>
                            <el-table-column label="时间" prop="dtt"></el-table-column>
                            <el-table-column label="方式" prop="way"></el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import facePage from "../../components/clock/facePage";

    export default {
        name: "ClockIn",
        components: {facePage},
        data() {
            return {
                user: {
                    name: '',
                    groupId: 101,
                    faceId: 3
                },
                clockList:[],
                date:''
                // url:require("./img/wallhaven-4dp2po_1920x1080.png")
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'groupId',
                'faceId'
            ])
        },
        watch:{

        },
        created() {
            this.getUser()
            this.getClockList()
        },
        methods: {
            getUser() {
                this.user = JSON.parse(window.sessionStorage.getItem("user"))
                this.user.groupId = 101
            },
            getClockList(){
                this.date = new Date().toLocaleDateString()
                this.getRequest('/clock/in/').then(resp=>{
                    if(resp){
                        // console.log(resp)
                        this.clockList = resp
                    }
                })
            }
        }
    }
</script>

<style lang="less">

</style>
<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 280px;
        height: 500px;
        margin-top: 20px;
        margin-left: 100px;
        background: rgba(256,256,256,.3);
        border: 0;
        color: black;
    }
</style>

<style lang="less" scoped>
    .el-card__body{
        padding: 0px 0px 0px 0px;
    }
</style>
<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }
    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: transparent;
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: transparent;
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: transparent;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }

</style>
<style >
    .el-table__body-wrapper::-webkit-scrollbar{
        /*width: 0;宽度为0隐藏*/
        width: 2px;
    }
    .el-table__body-wrapper::-webkit-scrollbar-thumb{
        border-radius: 2px;
        height: 50px;
        background: #eee;
    }
    .el-table__body-wrapper::-webkit-scrollbar-track{
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        background: rgba(0,0,0,0.4);
    }
</style>